// 验收弹窗
<template>
  <div class="addDialog basic-from" :class="{previewPage: type === 'preview'}">
    <el-dialog custom-class="small-padding-dialog" :title="dialogTitle" :visible.sync="dialogVisible" width="1200px" @close="handleDialogClosed" :close-on-click-modal="false">
      <el-form ref="form" :rules="rules" :model="formData" class="form-wrap">
        <h4 class="full">验收信息</h4>
        <el-form-item label="工程名称" class="listFormItem" prop="engineeringName">
          <el-button type="primary" class="add" size="mini" v-if="type === 'add'" @click="chooseProperty">选择工程</el-button>
          <el-input v-halfCharCode v-model="formData.engineeringName" readonly placeholder="请输入工程名称" />
        </el-form-item>
        <el-form-item label="物业名称" prop="propertyName">
          <el-input v-halfCharCode v-model="formData.propertyName" disabled placeholder="请输入物业名称" />
        </el-form-item>
        <el-form-item label="验收日期" class="breakItem" prop="deliverableTm">
          <el-date-picker v-model="formData.deliverableTm" value-format="yyyy-MM-dd" format="yyyy-MM-dd" :disabled="type === 'preview'" type="date" placeholder="请输入验收日期" :picker-options="pickerOptions" />
        </el-form-item>
        <el-form-item label="验收状态" prop="isQualified">
          <el-select clearable v-model="formData.isQualified" placeholder="-=请选择=-" :disabled="type === 'preview'" filterable>
            <el-option v-for="item in isQualifieds" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="验收评价" class="full" prop="performanceEvaluation">
          <el-input v-halfCharCode v-model="formData.performanceEvaluation" type="textarea" maxlength="200" :readonly="type === 'preview'" placeholder="请输入验收评价" />
        </el-form-item>
        <el-form-item label="备注" class="full" prop="remarks">
          <el-input v-halfCharCode v-model="formData.remarks" type="textarea" maxlength="200" :readonly="type === 'preview'" placeholder="请输入内容" />
        </el-form-item>
        <div v-if="dialogVisible" class="full">
          <h4 class="dialogItemTitle">上传附件</h4>
          <v-upload ref="upload" :busId="formData.deliverableId" modelType="decorateAccept" @onSuccess="onSuccess" v-model="uploadFileList" isShowFileList :isView="type === 'preview'" :autoLoadFiles="false" />
        </div>
      </el-form>
      <div slot="footer">
        <el-button @click="$bus.$emit('operationLog',formData.billId)" v-if="type==='preview'">操作日志</el-button>
        <el-button type="primary" v-throttle="[save]" v-if="type !== 'accept' && type !== 'preview'">提 交</el-button>
        <el-button type="primary" v-throttle="[save]" v-if="type === 'accept'">验 收</el-button>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </div>
      <!-- 工程选择弹窗 -->
      <propertyChooseDialog ref="propertyChoose" dialogType="accept" dependentType="decorate" @changeProperty="handlePropertyChange" />
    </el-dialog>
  </div>
</template>

<script>
import propertyChooseDialog from "@/views/wy-operate/components/propertyChooseDialog";
import { changeAcceptApply } from "@/views/wy-operate/api/decorate.js";

export default {
  name: 'addDepartment',
  components: {
    propertyChooseDialog,
  },
  inject: ['initList'],
  data () {
    return {
      type: 'add',//弹窗类型，默认新增
      //弹窗开关
      dialogVisible: false,
      // 表单项
      formData: {
        deliverableId: '',
        // 物业ID
        roomId: '',
        // 工单id
        billId: '',
        // 工程名称
        engineeringName: '',
        // 物业名称
        propertyName: '',
        // 验收日期
        deliverableTm: '',
        // 验收评价|履约评价
        performanceEvaluation: '',
        // 备注
        remarks: '',
        // 验收状态
        isQualified: ''
      },
      // 校验规则
      rules: {
        engineeringName: [{ required: true, message: '工程名称不能为空', trigger: 'blur' }],
        propertyName: [{ required: true, message: '物业名称不能为空', trigger: 'blur' }],
        deliverableTm: [{ required: true, message: '验收日期不能为空', trigger: 'blur' }],
        performanceEvaluation: [{ required: true, message: '验收评价不能为空', trigger: 'blur' }],
        isQualified: [{ required: true, message: '验收状态不能为空', trigger: 'blur' }],
      },
      // 上传文件列表
      uploadFileList: [],

      pickerOptions: {
        disabledDate: function disabledDate (time) {
          //return time.getTime() < Date.now() // 选当前时间之后的时间
          return time.getTime() > Date.now() // 选当前时间之前的时间
        }
      }
    }
  },
  computed: {
    // 弹窗标题计算
    dialogTitle () {
      return {
        'accept': '验收',
        'preview': '查看',
        'edit': '编辑',
        'add': '新增',
      }[this.type]
    },
    // 验收状态
    isQualifieds () {
      return this.getDict("is_qualified");
    },
  },
  methods: {
    //开启弹窗
    show ({ type, data = {} }) {
      if (['preview', 'edit', 'accept'].includes(type)) {
        this.formData = { ...this.formData, ...data }
        this.$nextTick(() => {
          this.$refs.upload && this.$refs.upload.getFiles(data.deliverableId)
        })
      }
      this.type = type
      this.dialogVisible = true
    },
    // 提交新增
    save () {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          if (this.uploadFileList.length) {
            this.$refs.upload.submit('decorateAccept', this.formData.deliverableId);
          } else {
            const res = await changeAcceptApply(this.formData, this.type)
            if (res.data.code == 0) {
              this.$message.success(`${this.dialogTitle}成功!`);
              this.initList({ current: 1, queryString: '' });
              this.dialogVisible = false;
            } else {
              this.$message.error(res.data.msg)
            }
          }
        }
      });
    },
    // 上传成功
    async onSuccess (response, file, fileList) {
      let params = this.type == 'add' ? { ...this.formData, deliverableId: response.data } : this.formData
      const res = await changeAcceptApply(params, this.type)
      if (res.data.code == 0) {
        this.$message.success(`${this.dialogTitle}成功!`);
        this.initList({ current: 1, queryString: '' });
        this.dialogVisible = false;
      } else {
        this.$message.error(res.data.msg)
      }
    },
    // 添加物业名称
    addProperty () {
      this.formData.propertyName.push({
        value: ''
      });
    },
    // 删除物业名称
    removeProperty (index) {
      this.formData.propertyName.splice(index, 1)
    },
    // 监听工程改变
    handlePropertyChange (data) {
      const { roomId, billId, engineeringName, propertyName } = data
      this.formData = {
        ...this.formData,
        roomId,
        billId,
        engineeringName,
        propertyName
      };
    },
    // 选择工程名称
    chooseProperty () {
      this.$refs.propertyChoose.show();
    },
    // 弹窗关闭监听
    handleDialogClosed () {
      this.formData = {
        deliverableId: '',
        roomId: '',
        billId: '',
        engineeringName: '',
        propertyName: '',
        deliverableTm: '',
        performanceEvaluation: '',
        remarks: ''
      }
      this.uploadFileList = []
      this.$refs.form.resetFields()
    }
  },
}
</script>

<style lang="scss" scoped>
@import "src/views/wy-operate/css/operate.scss";
.addDialog {
  /deep/ .el-date-editor--datetime {
    width: 100%;
  }
}
</style>
